<template>
  <div class="ctx">
    <el-button v-useHover:[callBack]="render" > hover事件</el-button>
  </div>
</template>

<script >
import { ref } from "vue";
import Teleport from "../common/Teleport/index";
export default {
  directives: {
    useHover: {
      inserted: (el, binding) => {
        const { value: render, arg: positionCallBack } = binding;
        console.log(positionCallBack);
        // 在元素上做些操作
        el.mouseenterListener = el.addEventListener("mouseenter", () => {
          const position = positionCallBack(el.getBoundingClientRect());
          el.hoverRef = Teleport(render, position);
        });
        el.mouseleaveListener = el.addEventListener("mouseleave", () => {
          if (el.hoverRef) {
            // el.hoverRef.close();
          }
        });
      },
      unbind: (el) => {
        if (el.mouseenterListener) {
          el.removeEventListener(el.mouseenterListener);
        }
        if (el.mouseleaveListener) {
          el.removeEventListener(el.mouseleaveListener);
        }
      },
    },
  },
  methods: {
    render(h) {
      return h(
        "el-botton",
        {
          props: {
            type: "primary",
          },
          style: {
            "background-color": "red",
            transform: "scale(1.5)",
          },
        },
        ["主要按钮"]
      );
    },
    callBack(e) {
      const position = {
        x: e.x,
        y: e.y - 20,
      };
      return position;
    },
  },
};
</script>

<style scoped lang='less'>
.ctx {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  position: relative;
  .el-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>